<template>
  <div class="container bg-white">
    <div class="swiper">
      <mt-swipe :auto="4000" class="banners">
        <mt-swipe-item v-for="(banner,index) in banners" :key="index">
          <img :src="banner.imgSrc|absUrl" @click="showLink(banner.linkAddr)" :alt="banner.title">
        </mt-swipe-item>
      </mt-swipe>
      <img src="../../assets/icons/topbar@2x.png" alt="" class="topbar-img">
    </div>
    <div class="horizontal-center">
      <div>
        <div class="box1 flex">
      <div class="text-center">
        <router-link class="ib" tag="div" :to="{path:'/center'}">
          <div class="rel ib">
            <img :src="userinfo.avatar|absUrl" alt="" class="avartar-img">
            <img src="../../assets/icons/star.png" alt="" class="user-level">
            <div class="user-level-txt">{{userinfo.userlevel||'1.0'}}</div>
          </div>
          <div class="box1-txt">
            个人中心
          </div>
        </router-link>

      </div>
      <div class="text-center">

        <div class="ib" @click="showQrcode">
          <img src="../../assets/icons/usercenter/userqrcode@2x.png" alt="" class="user-qrcode">
          <div class="box1-txt">
            会员二维码
          </div>
        </div>

      </div>
      <div class="text-center">
        <router-link class="ib" tag="div" :to="{path:'/shop'}">
          <img src="../../assets/icons/usercenter/shop@2x.png" alt="" class="user-qrcode">
          <div class="box1-txt">
            会员商城
          </div>
        </router-link>
      </div>
      <div>
        <router-link class="ib" tag="div" :to="{path:'/album'}">
          <img src="../../assets/icons/usercenter/oil@2x.png" alt="" class="user-qrcode">
          <div class="box1-txt">
            主题专区
          </div>
        </router-link>
      </div>
    </div>

    <div class="box1 flex">
      <div>
        <router-link class="ib" tag="div" :to="'/mypointscard'">
          <div class="box1-num">
            {{userinfo.points||0}}
          </div>
          <div class="box1-txt">
            积分
          </div>
        </router-link>

      </div>
      <div>
        <router-link class="ib" tag="div" :to="'/dzj'">
          <div class="box1-num">
            {{ticketCount||0}}
          </div>
          <div class="box1-txt">
            电子券
          </div>
        </router-link>
      </div>
      <div>
        <router-link class="ib" tag="div" :to="'/myinvoices'">
          <div class="box1-num">
            {{userinfo.invoiceCount||0}}
          </div>
          <div class="box1-txt">
            发票
          </div>
        </router-link>
      </div>
      <div>
        <router-link class="ib" tag="div" :to="'/collections'">
          <div class="box1-num">
            {{userinfo.collectionCount||0}}
          </div>
          <div class="box1-txt">
            收藏
          </div>
        </router-link>
      </div>
    </div>

    <div class="box1 flex">
      <div class="text-center">
        <router-link :to="{path:'/bill?type=0'}" class="ib rel" tag="div">
          <img src="../../assets/icons/usercenter/watipay@2x.png" alt="" style="width: 0.76rem;height: 0.6267rem">
          <div class="box1-txt" style="padding-top:0.2667rem;">
            待付款
          </div>
          <div class="tip-count" v-if="billData.waitPayCount">
            {{billData.waitPayCount|numFormat}}
          </div>
        </router-link>

      </div>
      <div class="text-center">
        <router-link :to="{path:'/bill?type=2'}" class="ib rel" tag="div">
          <img src="../../assets/icons/usercenter/waithuo@2x.png" alt="" style="width:0.7467rem;height:0.5467rem;">
          <div class="box1-txt" style="padding-top:0.2667rem;">
            待收货
          </div>
           <div class="tip-count" v-if="billData.waitReceiveCount">
            {{billData.waitReceiveCount|numFormat}}
          </div>
        </router-link>
      </div>
      <div class="text-center">
        <router-link :to="{path:'/bill?type=4'}" class="ib rel" tag="div">
          <img src="../../assets/icons/usercenter/waitcomment@2x.png" alt="" style="width:0.6rem;height:0.6rem;">
          <div class="box1-txt" style="padding-top:0.2533rem;">
            待评价
          </div>
          <div class="tip-count"  v-if="billData.waitCommentCount">
            {{billData.waitCommentCount|numFormat}}
          </div>
        </router-link>
      </div>
      <div>
        <router-link :to="{path:'/bill'}" class="ib rel" tag="div">
          <img src="../../assets/icons/usercenter/allbill@2x.png" alt="" style="width:0.64rem;height:0.5867rem;">
          <div class="box1-txt" style="padding-top:0.28rem;">
            全部订单
          </div>
          <div class="tip-count" v-if="billData.orderCount">
            {{billData.orderCount|numFormat}}
          </div>
        </router-link>
      </div>
    </div>

    <div class="box1 flex">
      <div>
        <router-link class="ib" :to="{path:'/customer_service'}" tag="div">
          <img src="../../assets/icons/usercenter/customer_center@2x.png" alt="" style="width: 0.8rem;height:0.5867rem;">
          <div class="box1-txt" style="padding-top:0.2667rem;">
            客服中心
          </div>
        </router-link>

      </div>
      <div>
        <router-link class="ib" :to="{path:'/costlist'}" tag="div">
          <img src="../../assets/icons/usercenter/myxf@2x.png" alt="" style="width:0.84rem;height:0.5733rem;">
          <div class="box1-txt" style="padding-top:0.2667rem;">
            我的消费
          </div>
        </router-link>

      </div>
      <div>
        <router-link class="ib" :to="{path:'/mymsg'}" tag="div">
          <img src="../../assets/icons/usercenter/mymsg@2x.png" alt="" style="width:0.7067rem;height:0.6rem">
          <div class="box1-txt" style="padding-top:0.2667rem;">
            我的消息
          </div>
        </router-link>
      </div>
      <div>
        <router-link class="ib" :to="{path:'/settings'}" tag="div">
          <img src="../../assets/icons/usercenter/mysettings@2x.png" alt="" style="width:0.5867rem;height:0.5733rem;">
          <div class="box1-txt" style="padding-top:0.28rem;">
            我的设置
          </div>
        </router-link>
      </div>
    </div>
      </div>
    </div>


    <div class="swpier2">
      <img src="../../assets/icons/bottombar@2x.png" alt="" class="bottombar-img">
      <mt-swipe :auto="3000" class="banners2">
        <mt-swipe-item v-for="(banner,index) in banners2" :key="index">
          <img :src="banner.imgSrc|absUrl" @click="showLink(banner.linkAddr)">
        </mt-swipe-item>
      </mt-swipe>
    </div>

    <div class="qrcode-masker" v-show="isQrcodeShowed" @click="hideQrcode">
      <div class="qrcode-masker-inner">
        <img :src="qrcodeData" v-if="qrcodeData" class="qrcode-dialog-img" />
      </div>
    </div>

  </div>

</template>
<style scoped lang="scss">
.user-qrcode {
  width: 1.12rem;
  height: 1.12rem;
}

// .top-bg-holder{
//     background-color: #fff;
//     bottom:0;
//     left:0;
//     right:0;
//     height:0.65rem;
//     position: absolute;
// }
.ib {
  display: inline-block;
}

.tip-count {
  position: absolute;
  right: -0.12rem;
  top: -0.15rem;
  width: 0.36rem;
  color: #f20b01;
  border: 1px solid #f20b01;
  height: 0.36rem;
  line-height: 0.36rem;
  font-size: 0.3rem;
  text-align: center;
  border-radius: 50%;
  background-color: #fff;
  color: #f20b01;
}
.user-level-txt {
  width: 1rem;
  height: 0.4rem;
  line-height: 0.4rem;
  text-align: right;
  box-sizing: border-box;
  padding-right: 0.16rem;
  font-size: 0.2933rem;
  color: #d1b80f;
  z-index: 10;
  border-radius: 0.4rem;
  position: absolute;
  bottom: 0.15rem;
  left: 1rem;
  background-color: #fff000;
}
.user-level {
  position: absolute;
  width: 0.6533rem;
  z-index: 11;
  height: 0.5733rem;
  bottom: 0.06rem;
  left: 0.8rem;
}

.qrcode-masker {
  background-color: rgba(0, 0, 0, 0);
  z-index: 10000;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}

.qrcode-dialog-img {
  width: 5.6533rem;
  height: 5.6533rem;
}

.qrcode-masker-inner {
  position: absolute;
  text-align: center;
  left: 0;
  right: 0;
  margin-top: -2.82665rem;
  top: 50%;
}

$swiper1Height: 4.14rem;
.swiper {
  height: $swiper1Height;
  position: relative;
  z-index: 100;
  margin-bottom: 0.2rem;
}

.swiper .mint-swipe-indicators {
  bottom: 1.2rem;
}

.banners {
  //   height: 4.44rem;
  height: $swiper1Height;
}

.banners2 {
  height: 4.0458rem;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

.banners2 img {
  height: 4.0458rem;
  width: 100%;
}

.swpier2 {
  height: 4.0458rem;
  position: absolute;
  z-index: 100;
  bottom: 0;
  left: 0;
  width: 100%;
}

.bottombar-img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
}

.banners img {
  height: $swiper1Height;
  width: 100%;
}

.box1 {
  font-size: 0.3467rem;
  color: #333333;
  justify-content: space-between;
  text-align: center;
  padding: 0.2rem 0;
  & > div {
    flex: 1;
  }
  .box1-num {
    font-size: 0.4533rem;
    color: #f20b01;
  }
  .box1-txt {
    padding-top: 0.2133rem;
  }
}

.hr15 {
  height: 0.36rem;
}

.topbar-img {
  width: 100%;
  position: absolute;
  bottom: -0.1rem;
  left: 0;
}

.avartar-img {
  width: 1.12rem;
  height: 1.12rem;
  border: solid 2px #036b46;
  border-radius: 50%;
}

div.ib {
  position: relative;
  z-index: 1000;
}

.horizontal-center {
  height: calc(100vh - 4.14rem - 4.0458rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
</style>
<script>
import QRCode from "qrcode";
export default {
  filters: {
    numFormat(num) {
      if (num > 99) {
        return "99+";
      }
      return num;
    }
  },
  methods: {
    showQrcode() {
      this.showLoading();
      this.$get("/api/user/qrcode")
        .then(res => {
          this.isQrcodeShowed = true;
          this.hideLoading();
          QRCode.toDataURL(res, (err, url) => {
            this.qrcodeData = url;
          });
        })
        .catch(_ => {
          this.hideLoading();
        });
    },
    hideQrcode() {
      this.isQrcodeShowed = false;
    },
    showLink(link) {
      if (link) {
        location.href = link;
      }
    }
  },
  data() {
    return {
      qrcodeData: "",
      billData: {},
      ticketCount: 0,
      isQrcodeShowed: false,
      banners: [],
      banners2: [],
      userinfo: {}
    };
  },
  created() {
    this.$get("/api/bill/bill_data").then(data => {
      this.billData = data||{};
    });
    this.$get("/api/getETicketsList").then(data => {
      this.ticketCount = data.length;
    });
    this.$get("/api/home_info").then(data => {
      this.userinfo = data || {};
    });
    this.$get("/api/ad?pid=1").then(data => {
      this.banners = data;
    });
    this.$get("/api/ad?pid=0").then(data => {
      this.banners2 = data;
    });
    this.$get("/api/user/getPointsAndLevel").then(data => {
      this.userinfo.points = data.points;
      this.userinfo.userlevel = data.level;
    });
  }
};
</script>
